<script setup>
const { proxy } = getCurrentInstance()

const { inspection_item_point_test_mode, inspection_item_inspection_type } = proxy.useDict(
  'inspection_item_point_test_mode',
  'inspection_item_inspection_type'
)

const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  },
  title: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const ruleFormRef = ref(null)

// 表单字段
const ruleForm = reactive({
  patrolItemName: '', // 巡检名称
  pointTestPosition: '', // 巡检部位
  pointTestMode: '1', //巡检方式
  workingHour: '', // 标准工时
  patrolItemContent: '', // 巡检内容
  inspectionStandard: '', // 巡检标准
  inspectionType: '1', // 巡检类型
  decisionResult: '', // 判定结果项
  remark: ''
})

// 表单校验
const rules = reactive({
  patrolItemName: [{ required: true, message: '请填写项目名称', trigger: 'blur' }],
  pointTestPosition: [{ required: true, message: '请填写巡检部位', trigger: 'blur' }],
  pointTestMode: [{ required: true, message: '请选择巡检方式', trigger: 'change' }],
  workingHour: [{ required: true, message: '请填写标准工时', trigger: 'blur' }],
  patrolItemContent: [{ required: true, message: '请填写巡检内容', trigger: 'blur' }],
  inspectionStandard: [{ required: true, message: '请填写巡检标准', trigger: 'blur' }],
  inspectionType: [{ required: true, message: '请填写巡检类型', trigger: 'blur' }],
  decisionResult: [{ required: true, message: '请填写判定结果项', trigger: 'blur' }]
})

// 提交方法
const submit = async () => {
  if (ruleForm.inspectionType == 2) {
    ruleForm.decisionResult = 'OK,NG'
    delete rules.decisionResult
  } else {
    rules.decisionResult = [{ required: true, message: '请填写判定结果项', trigger: 'blur' }]
  }
  const valid = await ruleFormRef.value.validate()
  if (!valid) return false

  return ruleForm
}

// 检验类型为范围值时，拼接为字符串
const decisionResultChange = () => {
  if (ruleForm.decisionResultOne && ruleForm.decisionResultTwo) {
    if (ruleForm.decisionResultOne >= ruleForm.decisionResultTwo) {
      ruleForm.decisionResultOne = ''
      ruleForm.decisionResultTwo = ''
      proxy.warningMsg('下限值不能大于等于上限值！')
      return
    }
    ruleForm.decisionResult = `${ruleForm.decisionResultOne},${ruleForm.decisionResultTwo}`
  } else {
    ruleForm.decisionResult = ''
  }
}

// 监听回显
const initData = () => {
  if (props.data?.id) {
    Object.keys(props.data).forEach(itemKey => (ruleForm[itemKey] = props.data[itemKey]))
    ruleForm.decisionResultOne = ruleForm.decisionResult.split(',')[0]
    ruleForm.decisionResultTwo = ruleForm.decisionResult.split(',')[1]
    ruleForm.inspectionType = String(ruleForm.inspectionType)
  }
}

// 检验类型改变时,清空内容
const inspectionTypeChange = () => {
  ruleForm.decisionResultOne = ''
  ruleForm.decisionResultTwo = ''
  ruleForm.decisionResult = ''
}

// 回显数据赋值
initData()
defineExpose({ submit })
</script>

<template>
  <div class="app-container">
    <!-- 新增 表单 -->
    <el-form :model="ruleForm" label-width="120px" :rules="rules" status-icon inline ref="ruleFormRef">
      <el-form-item label="项目编号" v-if="props.title != '新增'">
        <el-input clearable disabled v-model="ruleForm.patrolItemCode" />
      </el-form-item>
      <el-form-item label="项目名称" prop="patrolItemName">
        <el-input clearable :disabled="props.disabled" v-model="ruleForm.patrolItemName" />
      </el-form-item>
      <!-- <el-form-item label="巡检部位" prop="pointTestPosition">
        <el-input clearable :disabled="props.disabled" v-model="ruleForm.pointTestPosition" />
      </el-form-item> -->
      <!-- <el-form-item label="巡检方式" prop="pointTestMode">
        <el-select clearable :disabled="props.disabled" v-model="ruleForm.pointTestMode" placeholder="请选择">
          <el-option
            v-for="item in inspection_item_point_test_mode"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item label="标准工时" prop="workingHour">
        <el-input
          type="number"
          oninput="if(value<=0)value=''"
          clearable
          :disabled="props.disabled"
          v-model="ruleForm.workingHour"
        />
      </el-form-item>
      <div class="rk">
        <el-form-item label="巡检内容" prop="patrolItemContent">
          <el-input
            :rows="2"
            :disabled="props.disabled"
            type="textarea"
            clearable
            v-model="ruleForm.patrolItemContent"
          />
        </el-form-item>
        <el-form-item label="校验标准" prop="inspectionStandard">
          <el-input
            :rows="2"
            :disabled="props.disabled"
            type="textarea"
            clearable
            v-model="ruleForm.inspectionStandard"
          />
        </el-form-item>
        <el-form-item label="检验类型" prop="inspectionType">
          <el-radio-group @change="inspectionTypeChange" v-model="ruleForm.inspectionType" :disabled="props.disabled">
            <el-radio :label="item.value" v-for="(item, index) in inspection_item_inspection_type" :key="index">{{
              item.label
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="判定结果项" prop="decisionResult">
          <!-- 固定值 -->
          <el-input
            v-if="ruleForm.inspectionType == 1"
            clearable
            :disabled="props.disabled"
            v-model="ruleForm.decisionResult"
          />
          <!-- 状态值 -->
          <el-radio-group v-if="ruleForm.inspectionType == 2" disabled>
            <el-radio label="1">OK</el-radio>
            <el-radio label="2">NG</el-radio>
          </el-radio-group>
          <!-- 范围值 -->
          <div class="flex" v-if="ruleForm.inspectionType == 3">
            <el-input
              @blur="decisionResultChange"
              placeholder="下限值"
              clearable
              :disabled="props.disabled"
              v-model="ruleForm.decisionResultOne"
            />
            <span>-</span>
            <el-input
              placeholder="上限值"
              @blur="decisionResultChange"
              clearable
              :disabled="props.disabled"
              v-model="ruleForm.decisionResultTwo"
            />
          </div>
        </el-form-item>

        <div class="rk">
          <el-form-item label="备注" prop="remark">
            <el-input :rows="4" :disabled="props.disabled" type="textarea" clearable v-model="ruleForm.remark" />
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
.rk ::v-deep .el-form-item {
  width: 100% !important;
}
</style>
